<template>
	<div class="info-table">
		<Table 
			border
			size="small"
			:columns="thead" 
			:data="tbody"
			@on-selection-change="selectChange"></Table>
		<Page 
			class="page pull-right"
			size="small"
			show-total
			:current="current" 
			:total="total"
			@on-change="pageChange"></Page>
	</div>
</template>

<script>
	export default {
		props: {
			thead: {
				type: Array,
				default: () => {
					return []
				}
			},
			tbody: {
				type: Array,
				default: () => {
					return []
				}
			},
			total: {
				type: Number,
				default: 0
			},
			isSelect: {
				type: Boolean,
				Default: false
			}
		},
		data() {
			return {
				current: 1,
				page: 1
			}
		},
		methods: {
			selectChange(data) {
				if(!this.isSelect) {
					return
				}
				
				this.$emit('selectChange', data);
			},
			pageChange(page) {
				this.page = page
				this.$parent._getList(page);
			},
			refresh() {
				this.$parent._getList(this.page);
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		margin-top: 10px;
	}
</style>